/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/jsx-key */
import React, { useMemo } from 'react';
import { Card, Tabs,theme } from 'antd';
import Mtable from './mtable';
import { useOutletContext } from 'umi';
import PremButton from '../PremButton'; //权限判断fn

function isString(obj) {
  return obj.constructor === String ? true : false;
}

export default (props) => {
  const {
    token: { colorBorder },
  } = theme.useToken();

  const actionbtn = {
    add: <PremButton {...props?.addconfig}>新增</PremButton>,
    import: (
      <PremButton
        {...props?.importconfig}

      >
        导入
      </PremButton>
    ),
    export: (
      <PremButton
        {...props?.exportconfig}
      >
        导出
      </PremButton>
    ),
  };

  //右上角 pageextra 类型 1.reactDom 2.string 以逗号隔开 为none时不显示
  const renderextra = () => {
    if (props.pageextra && !isString(props.pageextra)) {
      if (typeof props?.pageextra == 'function') {
        return props.pageextra?.();
      } else {
        return props.pageextra;
      }
    } else if (props.pageextra === 'none') {
      return <div style={{ height: 28, width: 64 }} />;
    } else if (props.pageextra) {
      let strarr = props.pageextra ? props.pageextra.split(',') : ['add'];
      return strarr.map((it, i) => {
        return (
          <div key={i} style={{ marginRight: i == strarr.length - 1 ? 0 : 6 }}>
            {actionbtn[it]}
          </div>
        );
      });
    }
  };

  const items = useMemo(() => {
    if (props.tabList) {
      return props.tabList.map((it) => {
        const extracolumns = it?.columns
          ? {
            columns: it.columns,
          }
          : {};
        return {
          label: it.tab,
          key: it.key,
          children: (
            <>
              <div style={{ display: 'flex', width: '100%' }}>
                {(props.childposition == 'left' || !props.childposition) && props.children}
                <div
                  style={{
                    flex: 1,
                    overflow: 'hidden',
                    paddingLeft: `${props.childposition == 'left' ? '15px' : '0'}`,
                  }}
                >
                  {props.childposition == 'top' && props.children}
                  <Mtable {...props} {...extracolumns} iscurrent={props?.activeTabKey == it.key} />
                </div>
                {(props.childposition == 'right' || !props.childposition) && props.children}
              </div>
              {props.childposition == 'bottom' && props.children}
            </>
          ),
        };
      });
    }
  }, [props.tabList]);

  return (
    <div className="diycard">
      {props.withCard === false ? (
        <>
          <div style={{ display: 'flex', width: '100%' }}>
            {(props.childposition == 'left' || !props.childposition) && props.children}
            <div style={{ flex: 1, width: '100%' }}>
              {props.childposition == 'top' && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == 'right' || !props.childposition) && props.children}
          </div>
          {props.childposition == 'bottom' && props.children}
        </>
      ) : !props.tabList ? (
        <Card
          title={props.pagetitle}
          extra={<div className="center">{renderextra()}</div>}
          activeTabKey={props.activeTabKey}
          tabList={props.tabList}
          onTabChange={props.onTabChange}
          style={{ height: '100%', overflow:"visible",margin:12,boxShadow: `${colorBorder} 0px 0px 8px 0px`}}
        >
          <div style={{ display: 'flex', width: '100%' }}>
            {(props.childposition == 'left' || !props.childposition) && props.children}
            <div
              style={{
                flex: 1,
                overflow: 'hidden',
                paddingLeft: `${props.childposition == 'left' ? '15px' : '0'}`,
              }}
            >
              {props.childposition == 'top' && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == 'right' || !props.childposition) && props.children}
          </div>
          {props.childposition == 'bottom' && props.children}
        </Card>
      ) : (
        <div className="tabsTable ant-card ant-card-bordered">
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 20px 0' }}>
            <div style={{ fontSize: 16, fontWeight: "bolder",minWidth:400 }}>{props.pagetitle}</div>
            <div className="center">{renderextra()}</div>
          </div>
          <Tabs items={items} onChange={props.onTabChange} activeTabKey={props.activeTabKey} />
        </div>
      )}
    </div>
  );
};
